<!-- Start login -->
<section id="login">
    <div class="page-head">
        <div class="container">
            <div class="row">
                <div class="span9 head-text">
                    <h3><i class="icon-user"></i>My Account</h3>                    
                </div>
            </div>
        </div>			
    </div>
    <div class="container">
        <div class="page-section">
            <div class="row">
                <div class="span5 frm_login" >
                    <?php echo $this->element('message'); ?>
                    <form class="form-horizontal" action="" method="post" enctype="multipart/form-data" id="form">
                        <div class="control-group">
                            <label class="control-label" for="Firstname">First Name</label>
                            <div class="controls">                                
                                <input id="Firstname" type="text" name="firstname"  autofocus="autofocus" placeholder="First Name" value="<?php echo $this->Session->read('Auth.User.firstname'); ?>" required="required" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="MiddleName">Middle Name</label>
                            <div class="controls">                                
                                <input type="text" id="MiddleName" name="middlename" placeholder="Middle Name" value="<?php echo $this->Session->read('Auth.User.middlename'); ?>" style="" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="LastName">Last Name</label>
                            <div class="controls">                                
                                <input type="text" id="LastName" name="lastname" placeholder="Last Name" value="<?php echo $this->Session->read('Auth.User.lastname'); ?>" required="required" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="Email">Email</label>
                            <div class="controls">                                
                                <input type="text" id="Email" name="email" placeholder="Email ID" value="<?php echo $this->Session->read('Auth.User.email'); ?>" readonly="readonly" required="required"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="DOB">Date of Birth</label>
                            <div class="controls">  
                                <input type="text" id="DOB" name="dob" placeholder="Date of Birth" value="<?php echo date('Y-m-d', strtotime($this->Session->read('Auth.User.dob'))); ?>" readonly="readonly" required="required" />

                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="UserCountry">Country</label>
                            <div class="controls">                                
                                <select name="country" help="" id="UserCountry" required="required">
                                    <?php
                                    foreach ($list_country as $code => $name) {
                                        echo "<option value=\"{$code}\"" . ($this->Session->read('Auth.User.country') == $code ? "selected=selected" : "") . ">{$name}</option>";
                                    }
                                    ?>
                                </select>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="password">Password</label>
                            <div class="controls">
                                <?php echo $this->Html->link('Change password', '/users/cpass'); ?>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">                                
                                <button type="submit" class="btn">Submit</button>
                            </div>
                        </div>
                    </form>

                </div>				
            </div>
        </div>
    </div>
</section>
<!-- End about -->

<script>
// Form validation code will come here.
    $(document).ready(function(e) {

        $("#form").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                password: {
                    required: false,
                },
                email: {
                    required: true,
                    email: true
                },
                dob: {
                    required: true
                },
                country: {
                    required: true
                }
            },
            messages: {
                firstname: "Please enter your firstname",
                lastname: "Please enter your lastname",
                email: "Please enter a valid email address",
                dob: "please enter your birthday"
            }
        });

    });



</script>
<script type="text/javascript">

    function validate()
    {
        if (document.myForm.Country.value == "")
        {
            alert("Please provide your country!");
            return false;
        }

        if (document.myForm.password.value != '')
        {
            var p = document.myForm.password.value
            if (p.length < 7) {
                alert("Your password must be at least 7 characters long!");
                return false;
            }
        }
        return(true);
    }
//-->
</script>
<script type="text/javascript">
    window.onload = function() {
        new JsDatePick({
            useMode: 2,
            target: "dob",
            dateFormat: "%d-%m-%Y",
        });
    };

</script>
